<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            clear: both;
            overflow: hidden;
        }
        
        #box div {
            width: 50px;
            height: 50px;
            background-color: #333;
            float: left;
            margin: 20px 5px;
            text-align: center;
            line-height: 50px;
            font-size: 28px;
            color: #fff;
        }
        
        #last {
            clear: right;
        }
        
        button {
            display: block;
        }
    </style>
</head>

<body>
    <h1>距离双11还剩</h1>
    <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <br>
    <br>
    <div>
        <button>停止计时</button>
    </div>

    <br>
    <br>
    <form action="">
        <input type="text">
        <input type="button" value="发送">
    </form>

</body>

<script>
    var divs = document.querySelector('#box').querySelectorAll('div')
    var btn = document.querySelector('button')
    var form = document.querySelector('form');

    function counttimes() {
        var nows = new Date
        var endtime = new Date(2024, 11, 11)
        var times = endtime - nows;
        //计算天数
        var days = parseInt(times / 1000 / 60 / 60 / 24)
            //计算小时
        var hours = parseInt(times / 1000 / 60 / 60 % 24)
            //计算分钟
        var minuts = parseInt(times / 1000 / 60 % 60)
            //计算秒数
        var seconds = parseInt(times / 1000 % 60)

        hours = hours < 10 ? '0' + hours : hours
        minuts = minuts < 10 ? '0' + minuts : minuts
        seconds = seconds < 10 ? '0' + seconds : seconds
        divs[0].innerHTML = days;
        divs[1].innerHTML = hours;
        divs[2].innerHTML = minuts;
        divs[3].innerHTML = seconds;
    }
    counttimes();
    var time = setInterval(counttimes, 1000);
    btn.addEventListener('click', function() {
        clearInterval(time);
    })
    var timea = 10;
    form.children[1].addEventListener('click', function() {
        this.disabled = true;
        var time1 = setInterval(function() {
            if (timea == 0) {
                clearInterval(time1);
                form.children[1].disabled = false;
                form.children[1].value = '发送';
                timea = 10;
            } else {
                form.children[1].value = '还剩' + timea + '秒';
                timea--;
            }
        }, 1000);
        this.previousElementSibling.value = '';
    })
</script>

</html>